
<style lang="less">
	page{
		background: #F5F5F5;
	}
	.container{
		padding: 30upx 30upx 0;
		box-sizing: border-box;
		margin-bottom: 50upx;
	}
	.head{
		display: flex;
		justify-content: space-between;
		// align-items: center;
		flex-wrap: wrap;
		.head_list{
			
			text-align: center;
			margin-bottom: 26upx;
			width: 47%;
			background: #FFFFFF;
			box-shadow: 0upx 2upx 12upx 0upx rgba(175, 175, 175, 0.3);
			border-radius: 24upx;
			padding: 36upx 0;
			box-sizing: border-box;
			.head_list_title{
				font-size: 30upx;
				font-weight: bold;
				color: #333333;
				line-height: 30upx;
				position: relative;
			}
			.head_list_img{
				display: block;
				width: 30upx;
				height: 30upx;
				background: url('https://static.xpandago.net/wechat/images/xpawenhao.png') no-repeat right center;
				background-size: 26upx;
				position: absolute;
				top: 0;
				right: 42upx;
			
			}
			.head_list_num{
				height: 50upx;
				margin: 46upx 0;
				font-size: 50upx;
				font-family: "DINCond";
				font-weight: 400;
				color: #DBC291;
				line-height: 50upx;
			}
			// .charts-box{
			// 	width: 100%;
			// 	box-sizing: border-box;
			// 	height: 300upx;
			// }
		}
		
	}
	.foot{
		display: flex;
		flex-wrap: wrap;
		.foot_list{
			width: 216upx;
			height: 90upx;
			margin-bottom: 20upx;
		}
		.tuan{
			background: url(https://static.xpandago.net/wechat/images/tdyj@2x.png) no-repeat center/100% 100%;
			margin-right: 20upx;
		}
		.zi{
			background: url(https://static.xpandago.net/wechat/images/zjmx@2x.png) no-repeat center/100% 100%;
			margin-right: 20upx;
		}
		.fen{
			background: url(https://static.xpandago.net/wechat/images/fsxq@2x.png) no-repeat center/100% 100%;
		}
		.ding{
			background: url(https://static.xpandago.net/wechat/images/ddmx@2x.png) no-repeat center/100% 100%;
			margin-right: 20upx;
		
		}
		.jiang{
			background: url(https://static.xpandago.net/wechat/images/tdjjgl@2x.png) no-repeat center/100% 100%;
		}
	}
	
	movable-area {
		position: fixed;
		top: 30upx;
		right: 0upx;
		height: calc(100% - 30upx);
		width: 150upx;
		pointer-events: none;
		z-index: 8;
	
		movable-view {
			pointer-events: auto;
			width: 150upx;
			height: 60upx;
	
			.hidden {
				width: 150upx;
				height: 60upx;
				line-height: 60upx;
				border-radius: 30upx 0 0 30upx;
				overflow: hidden;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #CCCCCC;
				opacity: 0.8;
				.hidden_imgOne{
					width: 50upx;
					height: 50upx;
					background: url(https://static.xpandago.net/wechat/images/kejian_sj@2x.png) no-repeat center/100% 100%;
				}
				.hidden_imgTwo{
					width: 50upx;
					height: 50upx;
					background: url(https://static.xpandago.net/wechat/images/bukejian_sj@2x.png) no-repeat center/100% 100%;
				}
				// .hidden_img {
				// 	width: 50upx;
				// 	image{
				// 		display: block;
				// 		width: 100%;
				// 	}
				// }
			}
		}
	}
	.zhao{
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 9;
		background: #000000;
		opacity: 0.5;
	}
	.popup{
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		z-index: 10;
		width: 560upx;
		padding: 36upx 0 10upx;
		box-sizing: border-box;
		background: #F8F8F8;
		border-radius: 24upx;
	}
	.popup_list{
		text-align: center;
		.popup_list_title{
			font-size: 34upx;
			font-weight: bold;
			color: #333333;
			line-height: 34upx;
		}
		.popup_list_content{
			margin: 42upx 60upx 36upx;
			// view{
			// 	font-size: 26upx;
			// 	font-weight: 500;
			// 	color: #333333;
			// 	line-height: 40upx;
			// }
		}
		.popup_list_btn{
			border-top: 1upx solid #DDDDDD;
			height: 80upx;
			font-size: 34upx;
			font-weight: 500;
			color: #3A7AE4;
			line-height: 80upx;
		}
	}
	.matter{
		background: #FFFFFF;
		box-shadow: 0px 2px 12px 0px rgba(175, 175, 175, 0.2);
		border-radius: 15upx;
	}
	.matter_title{
		padding: 26upx 30upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1upx solid #EDEDED;
		.matter_title_fl{
			font-size: 30upx;
			font-weight: bold;
			color: #333333;
			line-height: 30upx;
		}
		.matter_title_fr{
			padding-left: 30upx;
			background: url(https://static.xpandago.net/wechat/images/xpa_shuaXing.png) no-repeat left center / 22upx 22upx;
			display: flex;
			// .matter_img{
			// 	display: block;
			// 	margin-right: 20upx;
			// 	width: 24upx;
			// 	height: 24upx;
			// }
			text{
				font-size: 22upx;
				font-weight: 500;
				color: #333333;
				line-height: 22upx;
			}
		}
	}
	.matter_list{
		padding: 20upx 30upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.matter_list_txt{
			font-size: 24upx;
			font-weight: bold;
			color: #333333;
			line-height: 38upx;
		}
		.matter_list_titleInfo{
			font-size: 20upx;
			font-weight: 500;
			color: #999999;
			line-height: 38upx;
		}
		.matter_list_fr{
			position: relative;
			padding: 16upx 30upx;
			background: #070506;
			border-radius: 30upx;
			text-align: center;
			font-size: 24upx;
			font-weight: 500;
			color: #FEFEFE;
			line-height: 24upx;
			.redCircle{
				position: absolute;
				right: 0;
				top: 0;
				width: 14upx;
				height: 14upx;
				background: #F64D3A;
				border-radius: 50%;
			}
		}
	}
</style>


<template>

	<view class="container">
		<view class="head">
			<view class="head_list">
				<view class="head_list_title" @tap="jump(0)">活跃人数<view @tap.stop="openTips(1)" class="head_list_img"></view></view>
				<view class="head_list_num" @tap="jump(0)" v-if="hide == 0">{{numsList[0]}}</view>
				<view class="head_list_num" @tap="jump(0)" v-else-if="hide == 1">{{numsListHide[0]}}</view>
				<!-- <view class="charts-box">
				  <qiun-data-charts type="line" :chartData="lineOne"  :ontouch="true" :ontap="false" :animation="false"/>
				</view> -->
			</view>
			<view class="head_list">
				<view class="head_list_title" @tap="jump(1)">团队规模<view @tap.stop="openTips(2)" class="head_list_img"></view></view>
				<view class="head_list_num" @tap="jump(1)" v-if="hide == 0">{{numsList[1]}}</view>
				<view class="head_list_num" @tap="jump(1)" v-else-if="hide == 1">{{numsListHide[1]}}</view>
				<!-- <view class="charts-box">
				  <qiun-data-charts type="line" :chartData="lineTwo"  :ontouch="true" :ontap="false" :animation="false"/>
				</view> -->
			</view>
			<view class="head_list">
				<view class="head_list_title" @tap="jump(2)">今日交易<view @tap.stop="openTips(3)" class="head_list_img"></view></image></view>
				<view class="head_list_num" @tap="jump(2)" v-if="hide == 0">{{numsList[2]}}</view>
				<view class="head_list_num" @tap="jump(2)" v-else-if="hide == 1">{{numsListHide[2]}}</view>
				<!-- <view class="charts-box">
				  <qiun-data-charts type="line" :chartData="lineThree"  :ontouch="true" :ontap="false" :animation="false"/>
				</view> -->
			</view>
			<view class="head_list">
				<view class="head_list_title" @tap="jump(3)">实时收益<view @tap.stop="openTips(4)" class="head_list_img"></view></view>
				<view class="head_list_num" @tap="jump(3)" v-if="hide == 0">{{sumMoney}}</view>
				<view class="head_list_num" @tap="jump(3)" v-else-if="hide == 1">{{sumMoneyHide}}</view>
				<!-- <view class="charts-box">
				  <qiun-data-charts type="line" :chartData="lineFour"  :ontouch="true" :ontap="false" :animation="false"/>
				</view> -->
			</view>
			
		</view>
		<view class="foot">
			<view class="foot_list tuan" @tap="openUrl('/pages/achievememt/achievememt')"></view>
			<view class="foot_list zi" @tap="openUrl('/pages/datail/datail?type=0')"></view>
			<view class="foot_list fen" @tap="openUrl('/pages/myFans/myFans?fansFlag=1')"></view>
			<view class="foot_list ding" @tap="openUrl('/pages/datail/orderDetails')"></view>
			<view class="foot_list jiang" @tap="openUrl('/pages/achievememt/bonusManagement')"></view>
		</view>
		<view class="matter" v-if="matterList!='' && matterList!=null && matterList!=undefined">
			<view class="matter_title">
				<view class="matter_title_fl">重要事项</view>
				<view class="matter_title_fr" @tap="refresh"><text>刷新</text></view>
			</view>
			<view class="matter_main">
				<view class="matter_list" v-for="(v,i) in matterList" :key="i" @tap="openGoods(v)">
					<view class="matter_list_fl">
						<view class="matter_list_txt">{{v.title}}</view>
						<view class="matter_list_titleInfo">{{v.titleInfo}}</view>
					</view>
					<view class="matter_list_fr">
						去联络
						<view class="redCircle" v-if="v.readedFlag == 0"></view>
					</view>
				</view>
			</view>
		</view>
		<movable-area>
			<movable-view direction="all" x="300" y="225" out-of-bounds="true" damping="10">
				<view class="hidden">
					<view class="hidden_imgOne"  v-if="hide == 0" @tap="hideChange(1)"></view>
					<view class="hidden_imgTwo"  v-else-if="hide == 1" @tap="hideChange(0)"></view>
				</view>
			</movable-view>
		</movable-area>
		<view class="zhao" v-if="hidden == true"></view>
		<view class="popup" v-if="hidden == true">
			<view class="popup_list" v-if="popupFlag == 1">
				<view class="popup_list_title">活跃人数</view>
				<view class="popup_list_content">
					<view>1.活跃人数为统计选定时间范围内用户的登录数(已去重)；</view>
					<view>2.数据1小时更新1次</view>
				</view>
				<view class="popup_list_btn" @tap="close">我知道了</view>
			</view>
			<view class="popup_list" v-else-if="popupFlag == 2">
				<view class="popup_list_title">团队规模</view>
				<view class="popup_list_content">
					<view>1.截止今日整个团队的总人数，含直属和非直属；</view>
					<view>2.数据1小时更新1次</view>
				</view>
				<view class="popup_list_btn" @tap="close">我知道了</view>
			</view>
			<view class="popup_list" v-else-if="popupFlag == 3">
				<view class="popup_list_title">今日交易</view>
				<view class="popup_list_content">
					<view>1.今日整个团队内的成交(按已支付金额算，退款不会被扣除)金额，包含自己的交易；</view>
					<view>2.数据1小时更新1次</view>
				</view>
				<view class="popup_list_btn" @tap="close">我知道了</view>
			</view>
			<view class="popup_list" v-else-if="popupFlag == 4">
				<view class="popup_list_title">实时收益</view>
				<view class="popup_list_content">
					<view>1.今日0点截止到现在的收益金额(含差价、师傅奖、团队奖)；</view>
					<view>2.数据1小时更新1次</view>
				</view>
				<view class="popup_list_btn" @tap="close">我知道了</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	import api from '@/common/api';
	import webView from '@/common/webView'
	// import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js';
  export default {

    components: {},

    data () {

      return {
		  isClose:false,
		  matterList:[],  // 重要事项
		  popupFlag:'',
		  hidden: false,
		  hide: 0, // 0 显示  1 隐藏
		  sumMoney:'', //显示金额
		  sumMoneyHide:'', //隐藏金额
		  numsList:[], //显示金额
		  numsListHide:[], //隐藏金额
		  token:'',
		  // lineOne:{}, // 活跃人数
		  // lineTwo:{}, //团队规模
		  // lineThree:{}, //今日交易
		  // lineFour:{}, //实时收益
	  }
    },
	onLoad(){
		let that=this
		let userStr = navigator.userAgent
		
		// this.token = 'eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiLmtYvor5XpnLgiLCJhdWRpZW5jZSI6ImUxMGFkYzM5NDliYTU5YWJiZTU2ZTA1N2YyMGY4ODNlIiwidXNlcl9pZCI6NzA0NjQsImNyZWF0ZWQiOjE2NDEyNzg4Nzg1MTksImV4cCI6MTY0Mzg3MDg3OCwidXNlcl9ncm91cF9pZCI6bnVsbCwicGxhdGZvcm0iOm51bGx9.3rV7YvBk8_5IISpgRPYUbzh0zkxWLg93CyHlny1buInzdpPuDhTAA4yvQxBFi3vBXm4GbDgaGxrqMdyDKYu2sQ'
		// that.informationNum()
		// that.earningsnow()
		// that.agendaNum()
		// let token=this.token
		// uni.setStorageSync('token', token);
		
		if (userStr.indexOf('Android') !== -1) {
		  that.token = window.Android.getUserToken();
		  let token=that.token
		  uni.setStorageSync('token', token);
		  that.informationNum()
		  that.earningsnow()
		  that.agendaNum()
		} else {
		  webView.callhandler('getUserToken', {}, (data) => {
			uni.setStorageSync('token', data);
		    that.token = data;
			that.informationNum()
			that.earningsnow()
			that.agendaNum()
		  })
		}
	},
	onHide() {
		this.isClose = true
	},
	onShow() {
		if(this.isClose == true){
			this.agendaNum()
		}
	},
    methods: {
		//返回app
		openGoods(params){
			console.log(params)
			this.readed(params.type,params.userIds)
			let userStr = navigator.userAgent
			if (userStr.indexOf('Android') !== -1) {
				let paramsInfo=JSON.parse(JSON.stringify(params))
				 paramsInfo.typeInfo=params.type
				 paramsInfo.type="detailInfo"
				window.Android.showInfoFromJs(JSON.stringify(paramsInfo))
			} else {
				webView.callhandler(
				  "JumpNativePage",
				  {
					Module: "VC_ClientList",
					params: JSON.stringify(params),
				  },
				  (data) => {}
				)
			}
		},
		// 刷新
		refresh(){
			this.agendaNum()
		},
		openTips(index){
			this.popupFlag = index
			this.hidden = true
		},
		close(){
			this.hidden = false
		},
		hideChange(index){
			this.hide = index
		},
		jump(index){
			if(index == 0){
				uni.navigateTo({
				  url: "/pages/information/teamActivity"
				})
			} else if (index == 1){
				uni.navigateTo({
				  url: "/pages/information/teamData"
				})
			}else if (index == 2){
				uni.navigateTo({
				  url: "/pages/information/transactionData"
				})
			}else if (index == 3){
				uni.navigateTo({
				  url: "/pages/information/profit"
				})
			}
		},
		openUrl(url) {
			uni.navigateTo({
				url: url
			})
		},
		// 事项是否已读
		async readed(type,userIds){
			const [err, res] = await api.readed({
				query: {
					type: type,
					userIds: userIds
				},
				header:{
					'token': this.token
				}
			 });
			 if(res.data.code == 0){
			}
		},
		
		async informationNum(){
			const [err, res] = await api.informationNum({
				header:{
					'token': this.token
				}
			 });
			 if(res.data.code == 0){
				this.numsList = res.data.data
				let reg = /[0-9]|\./g
				this.numsListHide = this.numsList.map((v,i) => String(v).replace(reg,'*'))
			}
		},
		async earningsnow(){
			const [err, res] = await api.earningsnow({
				header:{
					'token': this.token
				}
			 });
			 if(res.data.code == 0){
				 this.sumMoney = res.data.data.sumMoney
				 let reg = /[0-9]|\./g
				 this.sumMoneyHide = String(this.sumMoney).replace(reg,'*')
				 
				 // let obj = res.data.data
				 // let earningsListWeek = obj.earningsListWeek.map(v => parseFloat(v))
				 // this.lineFour = {categories:obj.dayList,series:[{name: '收益',data: earningsListWeek,color:'#DA0822'}]}
			}else{
				if(res.data.code ==500 && res.data.msg=='没有数据'){
					this.sumMoney='0.00'
					let reg = /[0-9]|\./g
					this.sumMoneyHide = String(this.sumMoney).replace(reg,'*')
					
					// this.lineFour = {categories:[1,2,3,4,5,6,7],series:[{name: '收益',data: [0,0,0,0,0,0,0],color:'#DA0822'}]}
				}
			}
		},
		async agendaNum(){
			const [err, res] = await api.agendaNum({
				header:{
					'token': this.token
				}
			 });
			 if(res.data.code == 0){
				 this.matterList = res.data.data
			}
		},
		// async informationTrend(){
		// 	const [err, res] = await api.informationTrend({
		// 		header:{
		// 			'token': this.token
		// 		}
		// 	 });
		// 	 if(res.data.code == 0){
		// 		let result = res.data.data
		// 		let activity = result.activity.map(v => parseFloat(v))
		// 		let team = result.team.map(v => parseFloat(v))
		// 		let trade = result.trade.map(v => parseFloat(v))
		// 		this.lineOne = {categories:result.days,series:[{name: '活跃人数',data: activity,color:'#72E2BA'}]}
		// 		this.lineTwo = {categories:result.days,series:[{name: '增加数',data: team,color:'#DA0822'}]}
		// 		this.lineThree = {categories:result.days,series:[{name: '成交金额',data: trade,color:'#DA0822'}]}
		// 	}
		// },
	}

  }
</script>